<template>
  <div class="editor">
    <div>
      <input type="text" v-model="title" placeholder="请输入文章标题" />
    </div>
    <div id="vditor" class="editor-container"></div>
    <div class="submit">
      <input type="button" value="保存" @mousedown="btnDown" @mouseup="btnUp" ref="yesBtn" @click="saveContent" />
      <input type="button" value="取消" @mousedown="btnDown" @mouseup="btnUp" ref="noBtn" @click="cancelContent" />
    </div>
  </div>
  <Modal :isModal="isModal" :modal="modal" @close="isModal = false" @affirm="affirm" />
</template>

<script setup>
import { onMounted, ref } from 'vue'
import Vditor from 'vditor'
import 'vditor/dist/index.css'
import { useUserStore } from '@/store/User.js'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import Modal from '@/components/modal/Modal.vue'

const UserStore = useUserStore();
const router = useRouter();
const route = useRoute()

const content = ref('开始你的创作吧！！！');
const title = ref('');
const yesBtn = ref(null);
const noBtn = ref(null);
let isModal = ref(false);
let modal = ref({
  title: '',
  content: '',
  type: 'info',
});
let vditor = null;

onMounted(() => {
  if (UserStore.UserID === '' && UserStore.UserName === '') {
    router.push({
      path: '/auth',
    });
  }
  vditor = new Vditor('vditor', {
    width: '95%',
    height: '85%',
    placeholder: '开始你的创作吧！！！',
    theme: 'classic',
    mode: 'sv',
    toolbar: [],
    cache: {
      enable: false,
    },
    preview: {
      actions: false,
    },
    after: () => {
      vditor.setValue(content.value);
    },
    input: (value) => {
      console.log(value);

      content.value = value;
    }
  })
  if (route.params.id) {
    axios({
      method: 'get',
      url: `http://127.0.0.1:8000/api/post/${route.params.id}`
    }).then(res => {
      vditor.setValue(res.data.data[0].content);
      title.value = res.data.data[0].title
    }).catch(err => {
      console.log(err);
    })
  }
  if (yesBtn.value) {
    yesBtn.value.style.boxShadow = `2px 2px 2px 2px black`;
  }
  if (noBtn.value) {
    noBtn.value.style.boxShadow = `2px 2px 2px 2px black`;
  }
});

function btnDown(event) {
  const btn = event.currentTarget;
  btn.style.boxShadow = `1px 1px 1px 1px black`;
}

function btnUp(event) {
  const btn = event.currentTarget;
  btn.style.boxShadow = `2px 2px 2px 2px black`;
}

function affirm() {
  if (modal.value.title === '成功提示：') {
    setTimeout(() => {
      router.push({
        path: '/creation',
      });
    }, 300);
  } else {
    setTimeout(() => {
      isModal.value = false;
    }, 100);
  }
}

function saveContent() {
  content.value = vditor.getValue();
  if(route.params.id){
    axios({
    method: 'put',
    url: `http://127.0.0.1:8000/api/post/${route.params.id}`,
    data: {
      title: title.value,
      content: content.value,
      userID: UserStore.UserID,
    }
  })
    .then((res) => {
      modal.value.title = '成功提示：';
      modal.value.content = res.data.message;
      modal.value.type = 'info';
      isModal.value = true;
    })
    .catch((err) => {
      modal.value.title = '错误提示：';
      modal.value.content = err.response.data.message ;
      modal.value.type = 'info';
      isModal.value = true;
    });
  }else{
    axios({
    method: 'post',
    url: 'http://127.0.0.1:8000/api/post',
    data: {
      title: title.value,
      content: content.value,
      userID: UserStore.UserID,
    },
  })
    .then((res) => {
      modal.value.title = '成功提示：';
      modal.value.content = res.data.message;
      modal.value.type = 'info';
      isModal.value = true;
    })
    .catch((err) => {
      modal.value.title = '错误提示：';
      modal.value.content = err.response.data.message;
      modal.value.type = 'info';
      isModal.value = true;
    });
  }
}

function cancelContent() {
  setTimeout(() => {
    router.push({
      path: '/creation',
    });
  }, 300);
}
</script>

<style scoped>
.editor {
  width: 100%;
  height: 100vh;
  background-color: white;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.editor div {
  width: 95%;
}

.editor [type="text"] {
  width: 100%;
  height: 30px;
  text-indent: 15px;
  box-sizing: border-box;
}

.editor-container {
  width: 100%;
  height: 85%;
}

.editor .submit {
  display: flex;
  justify-content: flex-end;
}

.editor [type="button"] {
  width: 10%;
  height: 100%;
  background-image: linear-gradient(45deg, rgb(112, 222, 255), rgb(198, 118, 255));
  border-radius: 5px;
  border: 1px solid;
  color: white;
  cursor: pointer;
  box-shadow: 2px 2px 2px 2px black;
  margin-right: 20px;
}
</style>